<template>
  <div>
    <van-nav-bar title="购物车">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-swipe-cell v-for="(item, index) in menus" :key="index">
      <van-card
        :price="item.price"
        desc="描述信息xxx"
        :title="item.goodsname"
        class="goods-card"
        :thumb="$host + item.img"
      >
        <template #footer>
          <van-button
            round
            type="info"
            style="border: 1px solid red"
            size="mini"
            color="red"
            icon="minus"
            @click="left(item.id)"
            v-if="item.num > 0"
          ></van-button>

          <van-button
            round
            type="info"
            style="border: 1px solid red"
            size="mini"
            color="red"
            icon="minus"
            @click="left(item.id)"
            disabled
            v-if="item.num <= 0"
          ></van-button>
          <!-- <span class="op" v-if="item.num>0">{{item.num}}</span>
          <span class="op" v-if="item.num<=0">0</span> -->
          <span class="op">{{ item.num > 0 ? item.num : "0" }}</span>
          <van-button
            round
            type="info"
            icon="plus"
            size="mini"
            color="red"
            @click="right(item.id)"
          ></van-button>
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          @click="del(item.id)"
          text="删除"
          type="danger"
          class="delete-button"
        />
      </template>
      <!-- <div>{{item.price*(item.num>0?item.num:'0')}} </div> -->
    </van-swipe-cell>
    <van-submit-bar class="of" :price="allprice" button-text="提交订单" />
    <div class="ip"></div>
  </div>
</template>

<script>
import { gouwu, dele, edit } from "../radio/index";
export default {
  created() {
    this.uid = JSON.parse(localStorage.getItem("userInfo2")).uid;
    this.getxin();
  },
  data() {
    return {
      uid: "",
      menus: [],
      ruleForm: {
        type: "",
        id: "",
      },
      allprice: "",
    };
  },
  methods: {
    left(id) {
      this.ruleForm.type = 1;
      this.ruleForm.id = id;
      this.getid();
    },
    right(id) {
      this.ruleForm.type = 2;
      this.ruleForm.id = id;
      this.getid();
    },
    async getid(data) {
      let res = await edit(this.ruleForm);
      this.getxin();
    },
    async del(id) {
      console.log(id);
      let res = await dele({ id: id });
      this.getxin();
      console.log(res);
    },
    async getxin(uid) {
      let res = await gouwu({ params: { uid: this.uid } });
      console.log(res.list);
      this.allprice = "";
      res.list.forEach((item) => {
        console.log(item.num);
        //  console.log(item.price*item.num,'9999');
        this.allprice = Number(this.allprice) + item.price * item.num * 100;
      });
      this.menus = res.list;
      console.log(this.allprice, "777");
    },
  },
};
</script>

<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.op {
  display: inline-block;
  padding: 0px 10px 0 10px;
  font-size: 18px;
}
.ip {
  width: 300px;
  height: 100px;
}
.of {
  position: fixed;
  bottom: 50px;
}
</style>